<template>
  <yd-layout>
    <yd-flexbox direction="vertical">
      <img :src="logo" style="width: 80%;margin-top: 70px;">
    </yd-flexbox>
    <div style="height: 300px;" v-if="me.user_name != 'wxadmin'">
      <yd-flexbox direction="vertical">
        <yd-flexbox-item style="text-align: center;">
          <yd-button class="ljhys-index-btn" bgcolor="#5FB878" shape="circle" @click.native="bookA">大会议室</yd-button>
          <br>
          <yd-button class="ljhys-index-btn" bgcolor="#009688" shape="circle" @click.native="bookB">小会议室</yd-button>
          <br>
          <yd-button v-if="me.sp_force" class="ljhys-index-btn" bgcolor="#393D49" shape="circle" @click.native="check">审批预定</yd-button>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div v-else>
    	 <yd-flexbox direction="vertical">
        <yd-flexbox-item style="text-align: center;">
          <yd-button class="ljhys-index-btn" bgcolor="#5FB878" shape="circle" @click.native="setSp">设置审批权</yd-button>
          <br>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
  </yd-layout>
</template>
<script>
  import bookApi from '@/api/bookApi.js'
  import { mapState, mapMutations } from 'vuex'
  import userApi from '@/api/userApi'

  export default {
    computed: {
      ...mapState([
        'me'
      ])
    },
    name: 'hello',
    data() {
      return {
        logo: require('@/assets/meeting-room.png')
      }
    },
    methods: {
      ...mapMutations([
        'updateMe'
      ]),
      bookA() {
        this.$router.push({
          path: '/book?roomId=1'
        })
      },
      bookB() {
        console.log(1)
        // this.$dialog.alert({mes: '小会议室正在进行装修，暂时无法预订！'})
        // this.$router.push({
        //   path: '/book?roomId=2'
        // })
      },
      search() {
        this.$router.push({
          path: '/search'
        })
      },
      check() {
        this.$router.push({
          path: '/check'
        })
      },
      setSp() {
        this.$router.push({
          path: '/setSp'
        })
      }
    },
    mounted() {
      console.log(this.me)
      var token = sessionStorage.getItem('token')
      if (token) {
        // 获取当前用户信息
        userApi.me()
          .then(data => {
            // console.log(data.role)
            this.updateMe(data)
          })
          .catch(errMsg => {})
      } else {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only
<style scoped>
  .ljhys-index-btn {
    width: 50%;
    height: 55px;
    margin-top: 50px;
    color: white;
  }
</style> -->